<template>
  <div class="container">
    <header-Bar></header-Bar>
    <div class="body">
      <page-body>
        <div class="create">
          <el-button type="primary" v-on:click="toReleaseNew">重新发布</el-button>
        </div>
        <div class="bigContent">
          <div class="lowContain">
            <span class="font">标题</span>
            <div class="noticContent1">
              <el-input
                type="textarea"
                :rows="1"
                placeholder="请输入内容"
                v-model="title">
              </el-input>
            </div>
          </div>
          <div class="lowContain">
            <span class="font">内容</span>
            <div class="noticContent2">
              <el-input
                type="textarea"
                :rows="7"
                placeholder="请输入内容"
                v-model="insertContent">
              </el-input>
            </div>
          </div>
        </div>
      </page-body>
    </div>
  </div>
</template>

<script>
import HeaderBar from '@/components/headerBar/HeaderBar';
import PageBody from '@/components/pageBody/PageBody';
import http from '../../util/http';

export default {
  data() {
    return {
      title: '',
      insertContent: '',
    };
  },
  components: {
		HeaderBar,
		PageBody,
  },
  methods: {
    toReleaseNew() {
      if (this.title === '' || this.insertContent === '') {
        this.$message.error('请填写完整的信息！');
      } else {
        http.put(`/noticeAPI/updateNotice?id=${window.localStorage.getItem('noticeID')}
                    &title=${this.title}&content=${this.insertContent}`)
        .then((res) => {
          this.$message({
            message: '编辑通知成功！',
            type: 'success',
          });
          this.$router.push('/adaHome');
        })
        .catch((error) => {
          console.log(error);
        });
      }
    },
    getEditNotice() {
      http.get(`/noticeAPI/getNoticeById?id=${window.localStorage.getItem('noticeID')}`)
			.then((res) => {
				const result = res.resultMap.getNoticeById;
				this.title = result.title;
				this.createTime = result.update_date;
				this.insertContent = result.content;
			})
			.catch((error) => {
				console.log(error);
			});
    },
  },
  mounted() {
		this.getEditNotice();
	},
};
</script>

<style scoped>
.container{
	background-color: #FAACA8;
	background-image: linear-gradient(19deg, #66cccc 0%, #FAACA8 50%,#DDD6F3 100%);
	background-size: 700%;
	animation: bganimation 15s infinite;
}
@keyframes bganimation {
	from {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	to {
		background-position: 0% 50%;
	}
}
.body{
  display: block;
  padding-top: 2rem;
}
.create{
  margin: 0 0 .4rem 21.4rem;
}
.el-button {
  background-color: #66cccc;
	color: white;
  border:#66cccc;
}
.bigContent{
  width: 13rem;
	height: 12rem;
  background-color: white;
	box-shadow: 0.1rem 0.06rem 0.15rem #888;
	margin: auto;
}
.lowContain{
  padding: 2rem 0 0 1rem;
}
.font{
  font-size:0.53rem;
  font-family:"\5FAE\8F6F\96C5\9ED1";
	color: #66CCCC;
}
.noticContent1{
  width: 5rem;
  margin: -.5rem 0 0 1.5rem;
}
.noticContent2{
  margin: -.5rem 0 0 1.5rem;
  width: 8rem;
}
</style>
